<template>
  <div class="home content full-height full-width">
    <div class="marquee" v-if="showMarquee">
      <q-icon name="iconfont icontubiao3-01 icon"></q-icon>
      <div class="content-box">
        <div class="content-info">
          {{content}}
        </div>
      </div>
      <q-icon name="iconfont icontubiao-67 icon close" @click="closeMarquee"></q-icon>
    </div>
    <device-info ref="deviceInfo" style="margin-bottom: 12px"/>
    <div class="flex justify-between form-inline" style="padding: 8px 0 0 0">
      <select-tooltip v-model="workshop"
                      :multiple='false'
                      :options="workshopList"
                      @changeData="getData"
                      msg="所在车间"/>
      <div class="flex-1 bor-hr"></div>
    </div>
    <div class="row items-center justify-between margin-b-24">
      <div class="flex column col-8">
        <workshop ref="workshop" @setTotal="setTotal"/>
      </div>
      <div class="flex column padding-l-24 col-4">
        <availability ref="availability" :workshop-list="workshopList"/>
      </div>
    </div>
    <stop-rate ref="stopRate" :workshop-list="workshopList"/>
    <Announcement v-if="showPopup" :popupData="popupData"/>
  </div>
</template>

<script>
import Announcement from './components/announcement.vue'
import deviceInfo from './components/home/device-info'
import workshop from './components/home/workshop-real-time'
import availability from './components/home/availability'
import stopRate from './components/home/stop-rate'
import { getNewsPopup, getNotice } from 'src/boot/home/home-new'
import { getWorkshops } from 'src/boot/status-monitor/status-overview'
import _ from 'lodash'

export default {
  name: 'home',
  components: {
    Announcement,
    deviceInfo,
    workshop,
    availability,
    stopRate
  },
  data () {
    return {
      workshop: null,
      showPopup: false,
      timer: null, // 定时器
      isInit: true, // 页面初始化
      popupData: [],
      workshopList: [],
      showMarquee: false,
      content: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.isInit && vm.getWorkshop()
      !vm.isInit && _.isNil(vm.workshop) && vm.$message.warning('请先在“基础数据-工厂建模”里创建车间！')
      !vm.isInit && !_.isNil(vm.workshop) && vm.getData()
    })
  },
  beforeDestroy () {
    // 清除定时器
    clearTimeout(this.timer)
    this.timer = null
  },
  beforeRouteLeave (to, from, next) {
    // 清除定时器
    clearTimeout(this.timer)
    this.timer = null
    next()
  },
  mounted () {
    // 更新日志弹框
    getNewsPopup().then(res => {
      // 如果有数据的话 就弹出提示否则就不弹出
      if (res.data && res.data.length > 0) {
        this.showPopup = true
        this.popupData = res.data.slice(0, 5)
      }
    })
    getNotice('0').then(res => {
      if (res?.data?.content) {
        this.showMarquee = true
        this.content = res.data.content
      }
    })
  },
  methods: {
    setTotal (total) {
      this.$nextTick(() => {
        this.$refs.availability.getTotal(total)
      })
    },
    getWorkshop () {
      getWorkshops().then(res => {
        this.workshopList = res.data
        this.isInit = false
        if (res.data.length) {
          this.workshop = res.data[0].value
          this.getData()
        } else {
          this.$message.warning('请先在“基础数据-工厂建模”里创建车间！')
        }
      }).finally(() => {
        this.timer = null
      })
    },
    getData () {
      clearTimeout(this.timer)
      this.timer = null
      if (this.$route.name !== 'home') {
        return
      }
      this.$nextTick(() => {
        this.$refs.deviceInfo.getData()
        this.$refs.workshop.changeWorkshop(this.workshop)
        this.$refs.availability.changeWorkshop(this.workshop)
        this.$refs.stopRate.changeWorkshop(this.workshop)
      })
      // 5分钟定时
      this.timer = setTimeout(() => {
        this.getData()
      }, 300000)
      this.$q.loading.hide()
    },
    closeMarquee () {
      this.showMarquee = false
    }
  }
}
</script>

<style scoped lang="stylus">
  @keyframes wordsLoop {
    0% {
      transform: translateX(100%)
    }
    100% {
      transform: translateX(-50%)
    }
  }
  .marquee{
    height: 40px;
    background: rgba(95, 119, 253, 0.1);
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #5F77FD;

    .icon{
      font-size: 14px;
      color: #5F77FD
    }

    .content-box {
      flex: 1;
      margin: 0 20px;
      overflow: hidden;

      .content-info{
        width: 120%;
        white-space nowrap
        animation: 25s wordsLoop linear infinite normal;
      }
    }

    .close{
      cursor: pointer;
    }
  }
  .temporary {
    background-color #ffffff
    background-image url("temporary.png") !important
    background-size contain !important
    background-position center !important
    background-repeat no-repeat !important
  }
  .content{
    border-radius 6px
  }
  .padding-l-24{
    padding-left 24px
  }
  .margin-b-24{
    margin-bottom 24px
  }
  .content-container{
    margin-right -24px
    padding-right 24px
  }
  >>>.q-field--borderless{
    margin-bottom 12px !important
    margin-right 0 !important
    .q-field__before{
      padding-right 0 !important
    }
  }
  >>>.form-name{
    font-size 16px
  }
  >>>.q-field__inner{
    background-color #FFFFFF
    overflow hidden
    border-radius 4px
  }
    .bor-hr{
      height 1px
      background-color #d3d3d3
      margin-top 15px
    }
</style>
